<template>
    <div class="search-box">
        <div class="search-func" @click="goMessageCenter">
            <img class="search-func-img" src="@/assets/images/home/search-message.png" />
            <div class="search-func-name">消息</div>
        </div>
        <div class="search-input-box" @click="goSearchPage">
            <img class="search-icon" src="@/assets/images/home/search-icon.png" />
            <div class="search-input">搜索您的百领好货</div>
        </div>
        <div class="search-func" @click="goCart">
            <img class="search-func-img" src="@/assets/images/home/search-cart.png" />
            <div class="search-func-name">购物车</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Search',
    methods: {
        goMessageCenter(){
            this.$router.push('/messageCenter')
        },
        goCart(){
            this.$router.push('/cart')
        },
        goSearchPage(){
            this.$router.push('/search')
        }
    }
}
</script>

<style lang="stylus" scoped>
.search-box
    display flex
    align-items center
    height 1.4rem
    background #3e6d5c
    .search-func
        width 1.5rem
        text-align center
        .search-func-img
            width .48rem
        .search-func-name
            margin-top .1rem
            font-size .29rem
            color #fff
            line-height 1
    .search-input-box
        display flex
        align-items center
        flex 1
        height 0.76rem
        padding 0 0.4rem
        background #fff
        border-radius 30px
        overflow hidden
        .search-icon
            width .34rem
        .search-input
            flex 1
            font-size .34rem
            color #888
            line-height 1
            margin-left .2rem
</style>


